<section id="home-section" style="width: 100%">
  <div
    style="width: 100%; height: 400px; position: absolute; background: #096dd9"
  ></div>
  <div id="deccription">
    <div class="title">前端监控平台 - 开源监控</div>
    <div class="desc">
      日活跃、用户行为记录、访问日志、JS错误日志、API请求详情、访问性能评估，开发者必须关心的各种运营数据
    </div>
    <div class="opt" *ngIf="isLogin">
      <button [routerLink]="['/dashboard']">立即使用</button>
      &nbsp;
      <button *ngIf="isAdmin" (click)="isVisible_register = true">
        创建用户
      </button>
    </div>
    <div class="opt" *ngIf="!isLogin">
      <button [routerLink]="['/dashboard']">马上体验</button> &nbsp;
      <button (click)="isVisible_login = true">独立账户</button>
    </div>
  </div>
</section>

<section id="home-section2" style="width: 100%">
  <h4>核心优势</h4>
  <div style="width: 1328px; margin: auto">
    <nz-card
      *ngFor="let item of proItems; let i = index"
      class="custom-card"
      style="width: 600px; text-align: center"
    >
      <div>
        <img
          style="
            margin: 14px auto 34px;
            display: block;
            width: 64px;
            height: 64px;
          "
          alt="example"
          [src]="'../../../assets/images/icon/' + item.avatar"
        />
      </div>
      <div style="font-size: 22px">
        {{ item.title }}
      </div>
      <div style="margin: 8px 0">
        {{ item.description }}
      </div>
    </nz-card>
  </div>
</section>

<section id="home-section2" style="width: 100%">
  <h4>使用流程</h4>
  <div style="width: 1328px; margin: auto">
    <nz-card
      *ngFor="let item of usedProcessItems; let i = index"
      class="custom-card"
      style="width: 410px; text-align: center"
    >
      <div>
        <img
          style="
            margin: 14px auto 34px;
            display: block;
            width: 64px;
            height: 64px;
          "
          alt="example"
          [src]="'../../../assets/images/icon/' + item.avatar"
        />
      </div>
      <div style="font-size: 22px">
        {{ item.title }}
      </div>
      <div style="margin: 8px 0">
        {{ item.description }}
      </div>
    </nz-card>
  </div>
</section>

<section id="home-section2" style="width: 100%">
  <h4>谁在使用</h4>
  <div style="width: 1328px; margin: auto">
    <nz-card
      *ngFor="let item of whoUsedItems; let i = index"
      class="custom-card"
      style="width: 300px"
    >
      <div style="font-size: 22px">
        <img
          style="width: 24px; height: 24px"
          alt="example"
          [src]="'../../../assets/images/icon/' + item.avatar"
        />
        <span
          class="ant-card-meta-title"
          style="vertical-align: middle; margin-left: 4px"
          >{{ item.title }}</span
        >
      </div>
      <div style="margin: 8px 0">
        {{ item.description }}
      </div>
    </nz-card>
  </div>
</section>

<section id="home-section2" style="width: 100%">
  <h4>业务范围</h4>
  <div style="width: 1328px; margin: auto">
    <nz-card
      *ngFor="let item of bussinessItems; let i = index"
      class="custom-card"
      style="width: 300px"
    >
      <nz-card-meta
        [nzAvatar]="item.avatar"
        [nzTitle]="item.title"
        [nzDescription]="item.description"
      >
      </nz-card-meta>
    </nz-card>
  </div>
</section>

<section
  id="home-section2"
  style="
    width: 100%;
    padding: 24px 6%;
    background-image: linear-gradient(
      -180deg,
      #fff 0,
      #f7faff 63%,
      #e9f3ff 100%
    );
  "
>
  <h3 style="text-align: center">帮助文档(官方)</h3>
  <ul
    style="
      margin-top: 16px;
      font-size: 16px;
      line-height: 28px;
      list-style: lower-greek;
    "
  >
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/RAQmBTQZa_JWfDowFtCFzw"
        >前端监控（web-monitor）</a
      >
    </li>
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/Ygjiya57R4nKpLZFQZ46BA"
        >前端数据收集（pv/uv）</a
      >
    </li>
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/OqyuIVxRtXCttgfos4sBmw"
        >前端监控数据收集（performance）</a
      >
    </li>
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/htGrjyPGaxIT32f_KMP3FQ"
        >前端监控数据收集（请求拦截）</a
      >
    </li>
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/k99UfoJdCJlrBWhDsqEffg"
        >监控系统(用户行为追踪)</a
      >
    </li>
    <li>
      <a
        appMonitorABlank
        target="_blank"
        href="https://mp.weixin.qq.com/s/LFVolLcuORyO_zvHPh9lsw"
        >JavaScript出错场景还原</a
      >
    </li>
  </ul>
</section>

<section class="section-contanier" style="height: 700px; width: 100%">
  <div
    class="section-overlay"
    style="opacity: 0.7; background-color: rgba(34, 34, 34, 0.54)"
  ></div>
  <div
    class="section-block"
    style="
      background: repeat rgb(34, 34, 34) 50% 50% / cover fixed;
      background-image: url('../../../assets/images/home.jpg');
    "
  >
    <div style="color: #fff; position: relative; padding-top: 4%">
      <p style="font-size: 30px; text-align: center">开源支持</p>
      <pre style="font-size: 16px; font-family: cursive">
        背景：
        项目创建至今，收到很多用户反馈。
        在此，感谢关注、支持和使用“前端监控系统”的各位朋友们。
        在你们的支持下，我们将继续砥砺前行，做更好的产品回馈你们。
        </pre
      >
      <pre style="font-size: 16px; font-family: cursive">
        困境：
        每一个做开源项目的个人或团队，都深知开源项目的不易。
        我们会花费无数个日日夜夜，想办法做出更好的产品。
        时间、资金、团队都是我们所需要的。
        可以通过下面支付宝、微信途径提供支持。
        再次感谢您们的支持。
        </pre
      >
      <h3 style="margin-left: 64px; color: #fff">支持作者(赏咖啡)</h3>
      <img
        nz-tooltip
        nzTitle="支付宝赞赏"
        style="width: 175px; margin: 8px 64px"
        src="/assets/images/zhifubao.png"
        alt="支付宝"
      />
      <img
        nz-tooltip
        nzTitle="微信赞赏"
        style="width: 175px; margin: 8px 0px"
        src="/assets/images/weixin.png"
        alt="微信"
      />
      <img
        nz-tooltip
        nzTitle="关注公众号"
        style="width: 175px; margin: 8px 84px"
        src="/assets/images/weixin-gongzhonghao.jpg"
        alt="公众号"
      />
    </div>
  </div>
</section>

<section id="footer" style="width: 100%">
  <div class="grid-fluid">
    <div class="grid">
      <h3>资源</h3>
      <ul>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://angular.cn/"
            title="Angular官网"
            >Angular</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://docs.mongodb.com/"
            title="数据库MongoDB"
            >MongoDB</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://ant.design/"
            title="UI设计模式"
            >Ant Design</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://ng.ant.design/"
            title="Ant Design的Angular实现"
            >NG-ZORRO</a
          >
        </li>
      </ul>
    </div>
    <div class="grid">
      <h3>帮助</h3>
      <ul>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://github.com/kisslove/web-monitoring"
            title="源码仓库"
            >GitHub</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="/assets/images/weixin-gongzhonghao.jpg"
            title="关注公众号"
            >公众号</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="/assets/images/weixin.png"
            title="微信"
            >支持作者</a
          >
        </li>
        <li>
          <a title="微信/QQ:676022504">联系方式</a>
        </li>
      </ul>
    </div>
    <div class="grid">
      <h3>推广(招商中)</h3>
      <ul>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=9xbvcsop"
            >阿里云优惠购</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="http://coolwow.myselfbuy.com/"
            title="一款帮你选择贷款方式的多功能利息计算工具"
            >酷娃利息对比计算工具</a
          >
        </li>
        <li>
          <a
            appMonitorABlank
            target="_blank"
            href="https://github.com/kisslove/ip2region"
            title="一款开源将IP转换成位置的工具，对外提供接口"
            >IP转换工具</a
          >
        </li>
      </ul>
    </div>
  </div>
  <div
    style="color: gray; text-align: center; background: #001529; padding: 24px"
  >
    <a href="http://www.beian.miit.gov.cn" target="_blank"
      >备案号：蜀ICP备20008065号-1</a
    >
  </div>
</section>

<nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100">
  <ng-template #tpl>
    <div
      style="
        height: 40px;
        width: 40px;
        line-height: 40px;
        border-radius: 4px;
        background-color: #1088e9;
        color: #fff;
        text-align: center;
        font-size: 20px;
      "
      class="ant-back-top-inner"
    >
      顶
    </div>
  </ng-template>
</nz-back-top>

<nz-modal
  [nzMaskClosable]="false"
  [nzOkText]="'确认'"
  [nzCancelText]="'取消'"
  [(nzVisible)]="isVisible_login"
  nzTitle="登录"
  (nzOnOk)="login()"
  (nzOnCancel)="isVisible_login = false"
>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24">邮箱</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24">
      <input nz-input [(ngModel)]="model.email" name="email" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="4" [nzXs]="24">密码</nz-form-label>
    <nz-form-control [nzSm]="18" [nzXs]="24">
      <input
        nz-input
        type="password"
        [(ngModel)]="model.password"
        name="password"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="margin-bottom: 0">
    <nz-form-control
      [nzSm]="24"
      [nzXs]="24"
      style="text-align: right; width: 90%"
    >
      <span>没有账户?</span
      ><span
        appMonitorABlank
        (click)="isVisible_login = false; isVisible_register = true"
        style="margin-left: 24px; text-decoration: underline; cursor: pointer"
        >{{ isAdmin ? "创建新用户" : "马上注册" }}
      </span>
    </nz-form-control>
  </nz-form-item>
</nz-modal>

<nz-modal
  [nzMaskClosable]="false"
  [nzOkText]="'确认'"
  [nzCancelText]="'取消'"
  [(nzVisible)]="isVisible_register"
  [nzTitle]="isAdmin ? '创建用户' : '独立账号'"
  (nzOnOk)="isAdmin ? register() : (isVisible_register = false)"
  (nzOnCancel)="isVisible_register = false"
>
  <div *ngIf="!isAdmin">
    <h4 style="color: #03a9f4 !important">
      关注作者公众号，发送独立账号（所创建的项目仅自己可见）。
    </h4>
    <div style="text-align: center; margin: 4px">
      <img
        style="height: 150px; width: auto"
        title="微信公众号"
        src="../assets/images/weixin-gongzhonghao.jpg"
        alt="微信"
      />
    </div>
  </div>

  <div *ngIf="isAdmin">
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24">邮箱</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <input nz-input [(ngModel)]="model2.email" name="email" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24">密码</nz-form-label>
      <nz-form-control [nzSm]="18" [nzXs]="24">
        <input
          nz-input
          type="password"
          [(ngModel)]="model2.password"
          name="password"
        />
      </nz-form-control>
    </nz-form-item>
  </div>
</nz-modal>
